<template>
    <div>
        <header-footer :commonData="{$parent:$parent}">
            <div class="online_apply" v-cloak>
                <div class="crumb">
                    <ul>
                        <li class="color666 f_left">当前位置：</li>
                        <li>
                            <router-link class="color666 f_left" to="/home">首页></router-link>
                        </li>
                        <li class="color666 f_left">在线报名</li>
                    </ul>
                </div>
                <div class="border_content text_center special_apply_box" v-if="!specialSureApplyInfo">
                    <img src="/static/img/title1.png" class="contTitleImg">
                    <h3 class="apply_title">特种作业人员继续教育报名</h3>
                    <h4 class="apply_title_explain">请填写您的报名信息</h4>
                    <el-form class="special_apply_form specialConfirm" label-width="100px">
                        <el-form-item class="text_left" label="姓名：">
                            <p class="apply_p">{{webUser.realName}}</p>
                        </el-form-item>
                        <el-form-item class="text_left" label="身份证号：">
                            <p class="apply_p">{{webUser.identityCode}}</p>
                        </el-form-item>
                        <el-form-item label="选择专业：" class="choose_project text_left chooseProfess">
                            <el-tag :key="index" v-for="(item,index) in arrTabs" closable :disable-transitions="false"
                                @close="handleClose(index)">
                                {{item.certificateName}}
                            </el-tag>
                            <a @click="chooseDialog=true" class="chooseProfessBtn">选择专业</a>
                        </el-form-item>
                        <el-form-item label="课时数量：" class="text_left tzgjxjyNumber">
                            <el-input-number v-model="form.multiple" :min="1" :max="40"></el-input-number>
                        </el-form-item>
                        <el-form-item label="选择发票：" class="choose_project">
                            <el-input v-model="invoiceTitle" readonly @focus="ticketDialogs = true"></el-input>
                            <a type="button" class="select_class" @click="invoiceFunc">选择发票</a>
                        </el-form-item>
                        <!-- 选择证书 -->
                        <el-dialog :visible.sync="chooseDialog" width="1150px" @opened="dialogopened">
                            <choose-profession ref="mychild" @childByValue="chooseZhuan"></choose-profession>
                            <a class="special_cancel" @click="chooseDialog=false">取消</a>
                            <a class="specialBtn" @click="chooseDialoSure">确定</a>
                        </el-dialog>
                        <el-form-item class="apply_btns" style="margin: 49px 0 50px 0!important;">
                            <a class="apply_return" @click="prev">返回</a>
                            <a @click="submitSure">确认提交</a>
                        </el-form-item>
                    </el-form>
                </div>
                <!-- 信息确认 -->
                <div class="border_content text_center special_apply_box" v-if="specialSureApplyInfo">
                    <img src="/static/img/title2.png"  class="contTitleImg">
                    <h3 class="apply_title">特种作业人员继续教育报名</h3>
                    <h4 class="apply_title_explain">请确认您的报名信息</h4>
                    <el-form class="special_apply_form" label-width="100px">
                        <el-form-item class="text_left" label="姓名：">
                            <p class="apply_p">{{webUser.realName}}</p>
                        </el-form-item>
                        <el-form-item class="text_left" label="身份证号：">
                            <p class="apply_p">{{webUser.identityCode}}</p>
                        </el-form-item>
                        <el-form-item label="课时数量：" class="choose_project text_left">
                            <el-input-number v-model="form.multiple" :min="1" :max="40" label="描述文字" :disabled="specialSureApplyInfo"></el-input-number>
                        </el-form-item>
                        <el-form-item class="text_left" label="价格：">
                            <p class="apply_p">{{(parseInt(form.multiple)*proPrice).toFixed(2)}}元</p>
                        </el-form-item>

                        <el-form-item label="发票：" class="choose_project">
                            <p class="apply_p">{{invoiceTitle}}</p>
                        </el-form-item>
                        <el-form-item label="选择专业：" class="choose_project"> </el-form-item>
                        <table class="special_webucation_table" width="100%">
                            <thead>
                                <tr>
                                    <th width="40px">序号</th>
                                    <th width="100px">姓名</th>
                                    <th width="220px">身份证号</th>
                                    <th>项目类别</th>
                                    <th>专业（工种）/证书编号</th>
                                    <th width="120px">有效日期</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(item,index) in chooseZhuans" :key="index">
                                    <td width="40px">{{index+1}}</td>
                                    <td width="100px">
                                        <a target="_blank" :href="item.originalUrl" title="点击查看个人信息">{{item.realName}}</a>
                                    </td>
                                    <td width="200px">{{item.identityCode}}</td>
                                    <td>{{productName}}</td>
                                    <td>{{item.certificateName}} / {{item.certificateNumber}}</td>
                                    <td width="100px">{{new Date(item.certificateEnddate).Format('yyyy-MM-dd')}}</td>
                                </tr>
                            </tbody>
                        </table>
                        <el-form-item class="apply_btns" style="margin: 49px 0 50px 0!important;">
                            <p style="color: #FF0000;font-size: 18px;width: 600px;text-align: left;margin-bottom: 10px;">提示：支付宝扫码完成付款后请等待页面跳转完成后再关闭网页!</p>
                            <a class="apply_return" @click="specialSureApplyInfo=false;">上一步</a>
                            <a @click="toPay">去付款</a>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <!-- 选择发票 -->
            <ticketDialog ref="invoiceChild" @ticketDialogBtn="invoiceBtn"></ticketDialog>
        </header-footer>
    </div>
</template>

<script>
    import headerFooter from '../../../components/cont_education/header_and_footer.vue'
    import chooseProfession from '../../../components/cont_education/special_choose_profession.vue'
    import ticketDialog from '../../../components/invoice_lists.vue'
    export default {
        name: "tzg_apply",
        data: function() {
            return {
                ticketDialogs: false, //选择发票
                invoiceTitle: "",
                productName: "特种作业人员",
                type: this.$route.params.type,
                chooseDialog: false,
                specialSureApplyInfo: false,
                currentApply: undefined,
                webUser: {
                    realName: "",
                    identityCode: "",
                    identity:""
                },
                form: {
                    type: this.$route.params.type,
                    multiple: 40, //课时
                    certificateIds: "", //选择专业
                    typeName: "",
                    invoiceTempId: "",
                    invoiceType: 0,
                },
                chooseZhuans: [], //弹框里选择专业
                proPrice: 0, //网教
                arrTabs: []
            }
        },
        mounted: function() {
            var that = this;
            this.common.post(this.api.getCombApply, {}, function(res) {
                var info = res.resultMap;
                that.webUser = info;
            });
        },
        methods: {
            invoiceBtn: function(data) {
            	this.form.invoiceTitle = data.invoiceTitle;
            	this.form.invoiceType = data.invoiceType;
            	this.form.invoiceTempId = data.invoiceTempId;
            },
            invoiceFunc: function() {
            	this.$refs.invoiceChild.getInvoiceTemp();
            },
            dialogopened: function() {
                this.$refs.mychild.getCertificates(this.webUser.identity.trim());
            },
            handleClose: function(index) {
                this.arrTabs.removeAt(index);
            },
            chooseDialoSure: function() {
                var that = this;
                if (this.chooseZhuans.length <= 0) {
                    this.$message.error("请选择专业！");
                    return;
                }
                if (this.common.isEquall(this.chooseZhuans)) { //全等
                    this.arrTabs = this.chooseZhuans;
                    this.chooseDialog = false;
                    this.chooseZhuans.forEach(function(v, i) {
                        that.form.certificateIds += v.id + ",";
                        that.form.typeName += v.certificateName + ",";
                    });
                    this.form.certificateIds = this.form.certificateIds.substr(0, this.form.certificateIds.length -
                        1);
                    this.form.typeName = this.form.typeName.substr(0, this.form.typeName.length - 1);
                    this.getProductObj();

                } else {
                    var h = window.innerHeight;
                    this.$message({
                        offset: h / 2 - 40,
                        type: "error",
                        message: '选择专业（工种）不属于同一类，如有疑问请参考左上方说明！'
                    });
                }
            },
            ticketDialogBtns: function(data) {
                if (data == false) {
                    this.ticketDialogs = false;
                    return;
                }
                this.ticketDialogs = false;
                this.invoiceTitle = data.invoiceTitle;
                this.form.invoiceTempId = data.invoiceTempId;
                this.form.invoiceType = data.invoiceType;
            },
            getProductObj: function() {
                var that = this;
                this.common.post(this.api.getTzgProductPrice, this.form, function(res) {
                    that.proPrice = res.resultMap.productPrice;
                });
            },
            chooseZhuan: function(checkedCities) {
                this.chooseZhuans = checkedCities;
            },
            submitSure: function() {
                var that = this;
                if (this.chooseZhuans.length <= 0) {
                    this.$message.error("请选择专业！");
                    return;
                }
                this.specialSureApplyInfo = true;
            },
            prev: function() {
                var that = this;
                this.common.toPage("/cont_education/index");
            },
            toPay: function() {
                var that = this;
                this.common.post(this.api.launchTzgApplyTrade, this.form, function(res) {
                    that.common.toPage("/home/apply/zhifubaopre/" + res.resultMap);
                });
            }
        },
        components: {
            headerFooter,
            chooseProfession,
            ticketDialog
        }
    }
</script>

<style>
    .header {
        width: 1150px;
		margin: 0 auto;
    }

    .el-checkbox {
        margin-right: 0;
    }

    
</style>
